<template>
  <div class="app-container page-container right-side-dialog">
    <div class="content_view">
      <el-row>
        <el-col :span="4" class="tree_view" :style="{minHeight: height + 'px'}">
          <el-tree :data="menu_tree_data" :props="defaultProps" default-expand-all @node-click="getTableData" :expand-on-click-node="false"></el-tree>
        </el-col>
        <el-col :span="20" class="table_view" :style="{minHeight: height + 'px'}">
          <div class="main-header">
            <el-row :gutter="20">
              <el-col :span="10" class="left">当前菜单：{{select_menu_data.menu_name}}</el-col>
              <el-col :span="14" class="right">
                <span v-if="auth.save != -1" class="spp-btn spp-btn-primary" @click="menuEditVisible = true">新增</span>
              </el-col>
            </el-row>
          </div>
          <div>
            <div>
              <el-table ref="table" :data="select_menu_data.child_menu" :height="height-80" size="mini" stripe>
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column label="菜单名称" prop="menu_name" min-width="150" align="left" />
                <el-table-column label="路径" prop="menu_url" min-width="150" align="left" />
                <el-table-column label="描述" prop="menu_desc" min-width="150" align="left" />
                <el-table-column label="图标" prop="menu_icon" min-width="150" align="left" />
                <el-table-column label="顺序" prop="menu_order" min-width="100" align="left" />
                <el-table-column label="操作" min-width="150" fixed="right" align="left">
                  <template slot-scope="scope">
                    <el-button v-if="auth.update != -1" type="text" @click="menuUpdate(scope.row)">修改</el-button>
                    <el-button type="text" class="font_red" v-if="scope.row.status_flag ==='1' && auth.disable != -1" @click="menuDisable(scope.row.menu_id)">停用</el-button>
                    <el-button type="text"  class="font_green" v-if="scope.row.status_flag ==='0' && auth.enable != -1" @click="menuEnable(scope.row.menu_id)">启用</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 新增编辑菜单 -->
    <el-dialog :title="menu_edit_form.title" :visible.sync="menuEditVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <el-form ref="menu_edit_form" label-width="20px" :model="menu_edit_form">
          <el-row >
            <el-col :span="12">
              <el-form-item prop="menu_name">
                <div class="form_lable">菜单名称</div>
                <el-input v-model="menu_edit_form.menu_name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="menu_url">
                <div class="form_lable">菜单路径</div>
                <el-input v-model="menu_edit_form.menu_url" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="menu_desc">
                <div class="form_lable">菜单描述</div>
                <el-input v-model="menu_edit_form.menu_desc" type="textarea" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="menu_target">
                <div class="form_lable">打开方式</div>
                <el-radio-group v-model="menu_edit_form.menu_target">
                  <el-radio label="self">当前窗口</el-radio>
                  <el-radio label="new_tag">新窗口</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="menu_css">
                <div class="form_lable">css样式</div>
                <el-input v-model="menu_edit_form.menu_css" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="menu_icon">
                <div class="form_lable">菜单图标</div>
                <el-input v-model="menu_edit_form.menu_icon" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="menu_order">
                <div class="form_lable">菜单顺序</div>
                <el-input v-model="menu_edit_form.menu_order" type="number" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div class="dialog-btn" style="text-align: right">
        <span class="spp-btn" @click="menuEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="menuEditSubmit()">保存</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { save, tree, update, disable, enable } from '@/api/pajx/sys/menu'
import { mapState } from 'vuex'
export default {
  name: 'SysMenu',
  components: { },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      menuEditVisible: false,
      menu_edit_form: {
        title: '新增菜单',
        type: 'add',
        menu_name: '',
        menu_url: '',
        menu_desc: '',
        menu_target: '',
        menu_css: '',
        menu_icon: '',
        menu_order: '',
        menu_pid: '',
        menu_id:''
      },
      menu_tree_data: [{
        menu_name: '全部',
        menu_pid: '',
        child_menu: []
      }],
      defaultProps: {
        children: 'child_menu',
        label: 'menu_name'
      },
      select_menu_data: {}
    }
  },
  computed: {
     ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    menuEditVisible(val) {
      if (val) {
        this.menu_edit_form.title = this.menu_edit_form.type==='add'?'新增菜单':'编辑菜单'
      }
      if (!val) {
        this.menu_edit_form.menu_name = ''
        this.menu_edit_form.menu_url = ''
        this.menu_edit_form.menu_desc = ''
        this.menu_edit_form.menu_target = ''
        this.menu_edit_form.menu_css = ''
        this.menu_edit_form.menu_icon = ''
        this.menu_edit_form.menu_order = ''
        this.menu_edit_form.menu_pid = ''
        this.menu_edit_form.menu_id = ''
        this.menu_edit_form.type = 'add'
      }
    }
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/sys/menu/save')
      this.auth.update = this.permission.indexOf('/api/sys/menu/update')
      this.auth.disable = this.permission.indexOf('/api/sys/menu/disable')
      this.auth.enable = this.permission.indexOf('/api/sys/menu/enable')
    },
    // 新增编辑菜单
    menuEditSubmit() {
      // 新增
      if (this.menu_edit_form.type === 'add') {
        this.menu_edit_form.menu_pid = this.select_menu_data.menu_id
        save(this.menu_edit_form).then(response => {
          this.menuEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getMenuTree()
        })
      }
      // 修改
      if (this.menu_edit_form.type === 'edit') {
        update(this.menu_edit_form).then(response => {
          this.menuEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getMenuTree()
        })
      }
    },
    // 获取菜单树
    getMenuTree() {
      tree().then(response => {
        this.menu_tree_data[0].child_menu = response.data
        this.select_menu_data = this.menu_tree_data[0]
        this.getTableData(this.select_menu_data)
      })
    },
    // 点击树状图获取表格数据
    getTableData(data) {
      this.select_menu_data = data
    },
    // 修改回显
    menuUpdate(data) {
      this.menuEditVisible = true
      this.menu_edit_form.menu_name = data.menu_name
      this.menu_edit_form.menu_url = data.menu_url
      this.menu_edit_form.menu_desc = data.menu_desc
      this.menu_edit_form.menu_target = data.menu_target
      this.menu_edit_form.menu_css = data.menu_css
      this.menu_edit_form.menu_icon = data.menu_icon
      this.menu_edit_form.menu_order = data.menu_order
      this.menu_edit_form.menu_id = data.menu_id
      this.menu_edit_form.type = 'edit'
    },
    // 停用菜单
    menuDisable(menu_id) {
      this.$confirm('确认要停用该菜单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disable(menu_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getMenuTree()
        })
      }).catch(() => {})
    },
    // 启用菜单
    menuEnable(menu_id) {
      this.$confirm('确认要启用该菜单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        enable(menu_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getMenuTree()
        })
      }).catch(() => {})
    }
  },
  created() {
    this.permissionAuth()
    this.getMenuTree()
  }
}
</script>
<style lang="scss">
.font_green{
  color: #5FB878;
}
.font_red{
  color: #FF5722;
}
.tree_view{
  border-right: 1px solid #E1E3E6;
  background: #F5F7FA;
  padding-top: 16px;
  .el-tree{
    background: #F5F7FA;
  }
}
.table_view{
  padding-left: 16px;
  .main-header{
    padding: 10px 0;
  }
}
</style>
